<style type="text/css">
    body {
        font-family: Source Han Sans SC;
    }

    .row {
        margin: 0;
    }

    .theme-color-1 {
        color: #333333;
    }

    .theme-color-2 {
        color: #555555;
    }

    .theme-color-3 {
        color: #18BC9C;
    }

    .theme-color-4 {
        color: #627EFC;
    }

    .theme-color-5 {
        color: #666666;
    }

    .margin-20 {
        margin-right: 20px;
    }

    .row-padding {
        padding-left: 29px;
        padding-bottom: 29px;

    }

    /* .#F5F5F5 */
    .header-box {
        width: 100%;
        /* height:236px; */
        background: #fff;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    .header-title,
    .main-title,
    .top5-title {
        height: 78px;
        border-bottom: 1px solid #eee;
        padding: 0 40px 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main-title,
    .top5-title {
        height: 58px;
    }

    .title-left {
        font-size: 20px;
        font-weight: 500;
    }

    .title-right {
        display: flex;
    }

    .header-con {
        padding: 30px 1.14% 0 0px;
    }

    .header-conBox {
        display: flex;
        background: #FEF6DE;
        padding: 20px 0 20px 22px;
        border-radius: 20px;
        position: relative;
        height: 160px;
    }

    .img-position {
        position: absolute;
        right: 22px;
        top: 22px;
        display: none;
        border-radius: 50%;
    }

    .header-conBox-back1 {

        background: #FEF6DE;
    }

    .header-conBox-back2 {

        background: #E2F7E9;
    }

    .header-conBox-back3 {

        background: #EBEEFE;
    }

    .header-conBox-back4 {

        background: #FFEDEB;
    }

    .header-conBox-back5 {

        background: #E4F0FF;
    }

    .header-conBox-back6 {

        background: #F6E9FE;
    }

    .header-conBox-back7 {

        background: #FEF6DE;
    }

    .header-conBox-back8 {

        background: #E4F0FF;
    }

    .img-box {
        width: 80px;
        height: 120px;
        background: #fff;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 44px;
    }

    .header-conBox-active {
        /* background: #E1F6F2; */
        border: 2px solid #18BC9C;
        box-sizing: border-box;
    }

    .header-conBox-active .img-position {
        display: block;
    }

    .header-con-img {
        width: 36px;
        height: 34px;
    }

    .header-con-msg {
        padding-top: 25px;
    }

    .header-con-msg-num {
        font-size: 34px;
        font-weight: 500;
    }

    .header-con-msg-color1 {
        color: #F0A70A;
    }

    .header-con-msg-color2 {
        color: #38C769;
    }

    .header-con-msg-color3 {
        color: #627EFC;
    }

    .header-con-msg-color4 {
        color: #FF826C;
    }

    .header-con-msg-color5 {
        color: #4498FF;
    }

    .header-con-msg-color6 {
        color: #B052EA;
    }

    .header-con-msg-color7 {
        color: #F0A70A;
    }

    .header-con-msg-color8 {
        color: #4498FF;
    }

    .header-con-msg-tip {
        font-size: 18px;

        font-weight: 400;
    }

    .main {
        background: #fff;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    #main-chart {
        padding: 20px 32px;
    }

    .main-title .title-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-right-btn {
        display: block;
        width: 50px;
        height: 32px;
        border: 1px solid #E3E2E5;
        color: #666666;
        font-size: 14px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }

    .header-right-btn-active {

        border: 1px solid #627EFC;
        color: #627EFC;
    }

    .top5 {
        height: 354px;
        background: #fff;
        border-radius: 20px;
    }

    .top-more {
        color: #999999;
    }

    .selects {
        padding: 5px 10px;
        display: block;
        border: 1px solid #eee;
    }

    .selects-active {
        border: 1px solid #f00;
    }
    #antv-con{
        background: #f1f4f6;
    }
    .time-position{
        position: relative;
        /* margin-right: 300px; */
    }
    .ranges{
        display: none;
    }

</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""> 
    <div class="form-group">
        <!-- <div class="col-xs-12 col-sm-8"> -->
            <input style="width: 280px;position: absolute;
            right: 411px;
            top: 86px;
        " id="c-usetime" class="form-control datetimerange" data-date-format="YYYY-MM-DD HH:mm:ss - YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[usetime]" type="text" value="{:date('Y-m-d H:i:s', time())} - {:date('Y-m-d H:i:s',time() + 24*60*60)}" value="自定义">
        <!-- </div> -->
    </div>

    
</form>

<div id="antv-con">
    <div class="header-box">
        <div class="header-title">
            <div class="theme-color-1 title-left">
                关键指数
            </div>
            <div class="theme-color-1 title-right time-position">
                <span class="header-right-btn margin-20 header-right-btn-active" style="">昨日</span>
                <span class="header-right-btn margin-20">今天</span>
                <span class="header-right-btn margin-20">近一周</span>
                <span class="header-right-btn margin-20">近一月</span>
                <span class="header-right-btn">全部</span>
                
           
            </div>
        </div>
        <div class="row row-padding">
            <div v-for="(item,index) in dataList" class="col-xs-6 col-sm-6 col-md-3 col-lg-3 header-con" @click="selectLine(index)">
                <div class="header-conBox" :class="['header-conBox-back'+item.id,item.checked?'header-conBox-active':'']" :style="{'border-color': item.color}">
                    <div class="img-box">
                        <img class="header-con-img" :src="'/assets/img/shopro/dashboard/'+item.id+'.png'" />
                    </div>

                    <div class="header-con-msg" :class="'header-con-msg-color'+item.id">
                        <div class="header-con-msg-num">
                            {{item.num}}
                        </div>
                        <div class="header-con-msg-tip">
                            {{item.title}}
                        </div>
                    </div>
                    <div class="img-position" :style="{'background': item.color}">
                        <img src="/assets/img/shopro/dashboard/icon-1.png">
                    </div>

                </div>
            </div>


        </div>

    </div>
    <div class="row main">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="main-title">
                <div class="theme-color-1 title-left">
                    实时数据
                </div>

            </div>
            <div id="main-chart"></div>

        </div>

    </div>
    <div class="row top5">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="top5-title">
                <div class="theme-color-1 title-left">
                    销量TOP5
                </div>
                <div class="theme-color-1 title-right top-more">
                    查看更多>

                </div>
            </div>

        </div>

    </div>
</div>
